.tyibs-timeline-step {
  counter-reset: flag;
}
.tyibs-timeline-step.nav-stacked li + li {
  margin-top: 0;
}
.tyibs-timeline-step li {
  position: relative;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}
.tyibs-timeline-step li a {
  cursor: pointer;
  padding: 10px 15px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}
.tyibs-timeline-step li a:before {
  content: counter(flag);
  counter-increment: flag;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}
.tyibs-timeline-step li a:after {
  content: "";
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

.step-square {
  margin-top: 40px;
}
.tyibs-timeline-step-square.nav-justified > li:hover a:before,
.tyibs-timeline-step-square.nav-stacked > li:hover a:before,
.tyibs-timeline-step-square.nav-justified > li:active a:before,
.tyibs-timeline-step-square.nav-stacked > li:active a:before,
.tyibs-timeline-step-square.nav-justified > li.active a:before,
.tyibs-timeline-step-square.nav-stacked > li.active a:before {
  background-color: #007bff;
  color: #ffffff;
  border-color: #007bff;
}
.tyibs-timeline-step-square.nav-justified > li:hover a:after,
.tyibs-timeline-step-square.nav-stacked > li:hover a:after,
.tyibs-timeline-step-square.nav-justified > li:active a:after,
.tyibs-timeline-step-square.nav-stacked > li:active a:after,
.tyibs-timeline-step-square.nav-justified > li.active a:after,
.tyibs-timeline-step-square.nav-stacked > li.active a:after {
  background-color: #007bff;
}
.tyibs-timeline-step-square.nav-justified > li:first-child a:after,
.tyibs-timeline-step-square.nav-stacked > li:first-child a:after {
  left: 50%;
  border-right: 1px solid #ffffff;
}

.tyibs-timeline-step-square.nav-justified > li:last-child a:after,
.tyibs-timeline-step-square.nav-stacked > li:last-child a:after {
  right: 50%;
  border-left: 1px solid #ffffff;
}

.tyibs-timeline-step-square.nav-justified > li > a,
.tyibs-timeline-step-square.nav-stacked > li > a {
  color: #ababab;
}
.tyibs-timeline-step-square.nav-justified > li > a:hover,
.tyibs-timeline-step-square.nav-stacked > li > a:hover {
  background-color: #ffffff;
  color: #007bff;
}
.tyibs-timeline-step-square.nav-justified > li > a:before,
.tyibs-timeline-step-square.nav-stacked > li > a:before {
  position: absolute;
  z-index: 2;
  top: -2rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 2rem;
  height: 2rem;
  background-color: #ffffff;
  line-height: 20px;
  border: 1px solid #999999;
}

.tyibs-timeline-step-square.nav-justified > li > a:after,
.tyibs-timeline-step-square.nav-stacked > li > a:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -35%;
  background-color: #ababab;
  z-index: 1;
  height: 2px;
  border: solid #ffffff;
  border-width: 0 1px;
}

.tyibs-timeline-step-square.nav-justified > li.active > a,
.tyibs-timeline-step-square.nav-stacked > li.active > a,
.tyibs-timeline-step-square.nav-justified > li.active > a:focus,
.tyibs-timeline-step-square.nav-stacked > li.active > a:focus,
.tyibs-timeline-step-square.nav-justified > li.active > a:hover,
.tyibs-timeline-step-square.nav-stacked > li.active > a:hover {
  color: #007bff;
  background: transparent;
}

/*step-progress*/


.tooltip.top{
  margin-top: -30px
}
.tyibs-timeline{
  margin-top: 30px;
}